<template>
  <div class="page-recharge page-frame">
        <div class="page-frame-body">
    <div class="acc-header">
      <div class="acc-score">
        <p>账户余额(元)</p>
        <h2 class="s-num">{{(deposit/100).toFixed(2)}}</h2>
      </div>
    </div>
    <div class="recharge-box">
      <ul>
        <li v-bind:class="{'active':k==selected}" @click="switchMoney(k)" v-for="(val,k) in depositList" v-bind:key="k">

          <div v-if="val.deposit==val.price" class="r-item">
              <div class="r-money-r">{{(val.price/100).toFixed(2)}}元</div>
          </div>
          <div v-else class="r-item">
             <div class="r-money-r">{{(val.price/100).toFixed(2)}}元</div>
             <p class="r-money-a">售价：{{(val.deposit/100).toFixed(2)}}元</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="recharge-bottom">
      <div @click="GoRecharge" class="btn-recharge">立即充值</div>
       <p class="recharge-agreement">点击立即充值，即表示您已经同意<span>《充值协议》</span></p>
    </div>

    </div>
        <nav-toolbars data="3"></nav-toolbars>
  </div>
</template>



<style lang="less" scoped>
.page-recharge {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f3f3f3;
}
.acc-header {
  width: 100%;
  height: 230px;
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;

  .acc-score {
    box-sizing: border-box;
    text-align: center;
    p {
      font-size: 30px;
      color: #666666;
      line-height: 70px;
    }
    h2 {
      color: #33a3eb;
      font-size: 70px;
    }
  }
}

.recharge-box {
  box-sizing: border-box;
  ul {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 35px;
  }
  li {
    width: 320px;
    float: left;
    height: 120px;
    margin-bottom: 30px;
    margin-right: 30px;
    border-radius: 20px;
    border: 2px solid #aaa;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    .r-item {
      width: 200px;
      text-align: center;
    }
    .r-money-r {
      color: #aaa;
      font-size: 40px;
      margin-bottom: 15px;
    }
    p {
      font-size: 24px;
      color: #999;
    }
  }
}
.recharge-box .active {
  background: -webkit-linear-gradient(top, #39aaec, #2992ed);
  border-color: transparent;
  color: #fff;
  .r-money-r {
    color: #fff;
  }
  p {
    color: #fff;
  }
}
.recharge-box li:nth-child(2n) {
  margin-right: 0;
}

.recharge-bottom {
  position:absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  width: 100%;
  box-sizing: border-box;
  padding: 40px 0;

  .btn-recharge {
    text-align: center;
    background: -webkit-linear-gradient(top, #39aaec, #2992ed);
    color: #fff;
    font-size: 28px;
    width: 100%;
    height: 100%;
    line-height: 100px;
    border-radius: 50px;
    width: 480px;
    height: 100px;
    margin: 0 auto 30px;
  }
  .recharge-agreement {
    text-align: center;
    font-size: 24px;
    color: #999;
    width: 100%;
  }
}
</style>


<script>
import NavToolbars from "@/components/navigation.vue";
export default {
  name: "HelloWorld",
  data() {
    return {
      selected: 1,
      deposit: 0,
      depositList: {}
    };
  },
  components: {
    NavToolbars
  },
  mounted() {
    this.initData();
    this.GetPayList();
  },
  methods: {
    switchMoney(k) {
      this.selected = k;
    },
    initData() {
      var self = this;
      var req = this.Axios.get(this.Interface.host, {
        params: self.GetQuery()
      });
      // 请求数据
      req.then(res => {
        var data = res.data.data.me;
        if (data != null) {
          this.deposit = data.deposit;
        }
      });
      // 请求接口失败
      req.catch(res => {
        this.Toast("服务器开小差了~");
      });
    },
    GetQuery() {
      return {
        query: `{
              me {
                id
                deposit
                favorite{
                  site{
                    name
                    area
                    address
                    id
                  }
                }
              }
            }`
      };
    },
    GetPayList() {
      var req = this.Axios.get(this.Interface.h + "/deposit");
      req.then(res => {
        this.depositList = res.data;
      });
    },
    GoRecharge() {
      var typeId = this.selected;
      var self = this;
      var req = this.Axios.post(this.Interface.h + `/order/deposit/${typeId}`);
      req.then(res => {
        var config = res.data;
        wx.ready(function() {
          wx.chooseWXPay({
            timestamp: config.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: config.nonceStr, // 支付签名随机串，不长于 32 位
            package: config.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
            signType: config.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: config.paySign, // 支付签名
            success: function(res) {
              // 支付成功后的回调函数
              if (res.errMsg == "chooseWXPay:ok") {
                var callbackUrl = self.$route.query.url;

                alert(callbackUrl);

                if (callbackUrl) {
                  window.location.href = callbackUrl;
                } else {
                  self.$router.push({
                    path: "payresult"
                  });
                }
                self.Toast("付款成功");
              } else {
                self.Toast("付款失败");
              }
            }
          });
        });
      });
    }
  }
};
</script>
